$(function() {
	  const Service = new ClassService();

	  // rem初始化
	  $("html").css("fontSize", $("html").width() / 30);

	  // 不满两位进行处理
	  function zero(num) {
	    if (num < 10) {
	      return "0" + num;
	    } else {
	      return ' ' + num;
	    }
	  }

	  // 设置时间格式
	  function time(cTime) {
	    cTime = parseInt(cTime);
	    // var h = zero(Math.floor(cTime/3600));
	    const m = zero(Math.floor(cTime % 3600 / 60));
	    const s = zero(Math.floor(cTime % 60));
	    return m + ":" + s;
	  }

	  // 歌曲列表动态渲染
	  function MusicListRender() {
	    let oLi = "";

	    for (let i = 0; i < data.length; i++) {
	      // fa fa-trash-o
	      oLi += "<li>" + data[i].name + '-' + data[i].singer + "<span class='fa fa-trash-o remove'></span></li>";
	    }

	    $(".m_list ul").html(oLi);
	  }

	  // 对不同用户的data进行赋值
	  // 拿到地址栏传参并且去除问号(单页应用核心)
	  const url = window.location.search.slice(1);

	  // 找到sessionStorage
	  if (url != sessionStorage.getItem("Landing") && sessionStorage.getItem("Landingstatic") != "true") {
	    window.location.href = "Landing.html";
	  }

	  // 刚进入页面的初始化渲染(根据不同用户展示其对应的数据)
	  Service.getUserSong(url, function(ajaxData) {
	    // 添加到data上
	    for (let i = 0; i < ajaxData.length; i++) {
	      // 删除id属性
	      delete ajaxData[i].id;

	      // 没有才push进去
	      if (ajaxData[i].name != "星晴") {
	        data.push(ajaxData[i])
	      }
	    }

	    // 歌曲列表渲染一遍
	    MusicListRender();
	  })

	  // 保存歌词
	  let txt = data[0].lrc;

	  const FirstSrc = 0;

	  // 音乐初始化
	  // $("audio").attr("src", data[0].src);
	  // 1.播放暂停
	  $("#play").on("tap", function() {
	    if ($(this).hasClass("MeaninglessIdentification")) {
	      audio.play();

	      // fa-play    fa-pause
	      $(this).removeClass("MeaninglessIdentification").removeClass("fa-play").addClass("fa-pause");
	    } else {
	      audio.pause();

	      $(this).removeClass("fa-pause").addClass("fa-play").addClass("MeaninglessIdentification");
	    }
	    // 正在调试是否删除这一句
	    // $("#wp_totalTime").html(time(audio.duration));
	  });

	  // 顺序播放
	  function SequentialPlayback() {
	    if ($(".PlayMode").hasClass("fa-exchange")) {
	      // 顺序播放
	      n++;

	      // 超过最大索引时候回到开头
	      if (n > data.length - 1) {
	        n = 0;
	      }

	      playing(n);
	    }
	  }
	  // 逆序播放
	  function ReversePlayback() {
	    if ($(".PlayMode").hasClass("fa-exchange")) {
	      n--;

	      // 超过最小索引时候回到最后
	      if (n < 0) {
	        n = data.length - 1;
	      }

	      playing(n);
	    }
	  }
	  // 循环播放
	  function LoopPlayback() {
	    if ($(".PlayMode").hasClass("fa-recycle")) {
	      // 循环播放
	      n = n;
	      playing(n);
	    }
	  }
	  // 随机播放
	  function RandomPlayback() {
	    if ($(".PlayMode").hasClass("fa-random")) {
	      n = Math.floor(Math.random() * data.length);
	      playing(n);
	    }
	  }

	  // 2.上一曲下一曲
	  var n = 0; // 歌曲播放核心:根据索引
	  $("#pre").on("tap", function() {
	    ReversePlayback();
	    LoopPlayback();
	    RandomPlayback();
	    // $("#play").removeClass("MeaninglessIdentification");
	  });
	  $("#next").on("tap", function() {
	    SequentialPlayback();
	    LoopPlayback();
	    RandomPlayback();
	    // console.log(audio.volume);
	    // $("#play").removeClass("MeaninglessIdentification");
	  });

	  // 播放函数
	  function playing(n) {
	    // 清空数组(切歌又是新的歌词,需要清空,方便后面的添加)
	    ArrMs.splice(0, ArrMs.length);

	    // 不知道说什么好,调了半个小时................
	    // 不止是要清空数组,通过ArrMsindex控制的当前播放歌词同样要清空,不然到下一首的时候就不是从第一句歌词开始的了!!!
	    ArrMsindex = 0;

	    // 满足后足切页面的逻辑
	    $("#play").removeClass("MeaninglessIdentification");

	    // 更改src
	    $("audio").attr("src", data[n].src);

	    // 监听歌曲是否加载完成
	    audio.oncanplay = function() {
	      // 设置歌曲总长度
	      $("#wp_totalTime").html(time(audio.duration));
	    }

	    // 歌名渲染
	    $("#m_gm").html(data[n].name);

	    // 更改歌手
	    $("#m_singer").html(data[n].singer);

	    // 更改背景
	    // $(".musicbg").css("background", data[n].star+"no-repeat");
	    // $(".musicbg").css("background-size", "100% 100%");
	    $(".musicbg img:first-child").attr("src", data[n].smallControlimg);

	    txt = data[n].lrc;

	    // 播放更改按钮并旋转
	    // $("#m_star img").addClass("rotate");
	    // $("#play").css("backgroundImage", "url(img/zan.png)");
	    $("#play").removeClass("MeaninglessIdentification").removeClass("fa-play").addClass("fa-pause");

	    audio.play();

	    $("#lrcCon").css("margin-top", "20px");

	    currentLrc();

	    // console.log("这是"+data[n].name+"的数组");
	    // console.log(ArrMs);

	    // 评论页初始化
	    commentinit();
	  }

	  // 3.点击展开收缩菜单
	  let mark1 = true;

	  function ListAmimate() {
	    if (mark1) {
	      $(".m_list").animate({
	        right: 0
	      }, 450);
	    } else {
	      $(".m_list").animate({
	        right: -500
	      }, 450);
	    }
	    mark1 = !mark1;
	  }

	  // 点击右下角菜单按钮
	  $("#menu").on("tap", function() {
	    ListAmimate()
	  })

	  // 4.点击音乐列表播放对应歌曲
	  $(".m_list ul").delegate("li", "tap", function() {
	    n = $(this).index();

	    playing(n);

	    // $("#menu").tap();
	    ListAmimate();
	  })

	  // 5.音乐列表的删除功能
	  $(".m_list ul").delegate("li span", "tap", function() {
	    // ajax中this指向window,先保存一份
	    const that = $(this).parent();

	    // strs = str.split(","); //字符分割
	    let str = $(this).parent().text();

	    str = str.split("-")[0];
      console.log('删除');
	    // 删除
	    Service.ListRemove(url, str, function(dataa) {
	      if (dataa) {
	        // 删除数据
	        data.splice(that.index(), 1);

	        // 记录当前列表索引,方便后面判断
	        const index = that.index();

	        // 删除节点
	        // $(this).parent().remove();
	        that.remove();
	        // 特别注意:一定要先删数据,再删除节点,因为先删除节点的话会影响之后删除的数据的索引值,而导致删除错误

	        // 如果删除的是当前歌曲,那么播放下一曲
	        if (n == index) {
	          playing(n + 1);
	        }
	      }
	    })

	    // 阻止冒泡
	    return false;
	  })

	  // 6.播放方式的图标切换
	  $(".PlayMode").on("tap", function() {
	    // fa-exchange:顺序	fa-random:随机	fa-recycle:循环
	    if ($(this).hasClass("fa-exchange")) {
	      $(this).removeClass("fa-exchange").addClass("fa-recycle");
	    } else if ($(this).hasClass("fa-recycle")) {
	      $(this).removeClass("fa-recycle").addClass("fa-random");
	    } else if ($(this).hasClass("fa-random")) {
	      $(this).removeClass("fa-random").addClass("fa-exchange");
	    }
	  })

	  // 7.播放完成后根据图标判断播放方式(默认向后顺序播放)
	  audio.onended = function() {
	    SequentialPlayback();
	    LoopPlayback();
	    RandomPlayback();
	  }

	  // 8.键盘按键快进37快退39功能
	  $(document).keyup(function(e) {
	    if (e.keyCode == 37) {
	      audio.currentTime -= 10;
	    }
	    if (e.keyCode == 39) {
	      audio.currentTime += 10;
	    }
	    if (e.keyCode == 32) {
	      $("#play").tap();
	    }
	  })

	  // 9.ontimeupdate:当音频一直在播放的时候(歌词同步)
	  audio.ontimeupdate = function() {
	    nowTime();

	    // 获取当前播放的时间
	    curTime = parseInt(this.currentTime);
	    // 监听还没播放到下一句的时候

	    // console.log("相等时候变色"+"curTime="+curTime+"<=====>"+"ArrMs[ArrMsindex]="+ArrMs[ArrMsindex]);
	    // console.log(ArrMs);

	    if (curTime < ArrMs[ArrMsindex]) {
	      // console.log("正在播放第"+(ArrMsindex-1)+"句");

	      $("#lrcCon > p").css("color", "white");
	      // console.log(curTime+"<==========>"+$("#gc"+ArrMs[ArrMsindex-1]).text());
	      $("#gc" + ArrMs[ArrMsindex - 1]).css("color", "#31C27C");
	    } else {
	      ArrMsindex++;
	    }
	  }

	  // 10.播放进度与进度条的更新
	  function nowTime() {
	    // console.log(this);    window
	    $("#wp_playTime").html(time(audio.currentTime));

	    // 通过改变其宽度来显示的-->宽度=当前播放时长/总时长*进度载体宽度
	    $(".progress > .line").css("width", audio.currentTime / audio.duration * $(".progress").width());
	    $("#wp_processBtn").css("left", audio.currentTime / audio.duration * $(".progress").width());
	  }

	  // 11.歌词同步
	  // 保存每一句对应起始的秒数,这样就可以到达歌词对应高亮了(根据当前播放时间跟这个每句对应的起始时间)
	  var ArrMs = [];
	  var ArrMsindex = 0;

	  function currentLrc() {
	    // 根据字符"["分割成一个字符串数组
	    const lrcArr = txt.split("[");

	    let html = '';

	    for (let i = 0; i < lrcArr.length; i++) {
	      // 对数组每一个元素再次切割变成数组.格式:["时间":"歌词"]
	      // "00:00.31]海阔天空-Beyond" ==> ["00:00.31", "海阔天空-Beyond"]
	      const arr = lrcArr[i].split("]");

	      // 切割	["00:18.51", "今天我寒夜里看雪飘过"] ==> ["00:18", "51"]
	      const time = arr[0].split(".");

	      // 切割	["00:18", "51"] ==> ["00", "18"]
	      const timer = time[0].split(":");

	      // 将时间转换为秒
	      const ms = timer[0] * 60 + timer[1] * 1;

	      ArrMs.push(ms);
	      // 歌词内容
	      const text = arr[1];
	      /*
	       	因为lrcArr[0]为undefined	两种解决方案
	       	1.for循环从1开始
	       	2.进行一次if判断,if内的null,undefined是不会进去的
	      */
	      // 创造节点
	      if (text) {
	        html += "<p id=gc" + ms + ">" + arr[1] + "</p>";
	      }

	      // 设置内容
	      $("#lrcCon").html(html);
	    }

	    let sum = 0;
	    let curTime = 0;

	    // timeupdate:当目前的播放位置已更改时
	    audio.addEventListener("timeupdate", function() {
	      // 获取当前播放的时间
	      curTime = parseInt(this.currentTime);
	      // console.log(curTime);

	      // 设置小控制台歌词(有点小问题:播放久了再切换歌以后这里的歌词=上一首播放时间的这首歌的歌词)
	      const Lyrics = $("#gc" + ArrMs[ArrMsindex - 1]).html();
	      $(".SmallControl_Lyrics").html(Lyrics);
	      // console.log(curTime+"<====>"+Lyrics);
	      // console.log("相等的时候动"+$("#lrcCon > p").eq(4+sum).attr("id")+"<===>"+ "gc"+curTime);
	      if ($("#lrcCon > p").eq(4 + sum).attr("id") == "gc" + curTime) {
	        $("#lrcCon").css("marginTop", 30 - sum * 30 + "px");

	        sum++;
	      }
	    });
	  }
	  currentLrc();

	  let index = 0;
	  const ArrMsindex2 = [];

	  // 12.跃进(file生效)
	  $(".progress").on("tap", function(e) {
	    ArrMsindex2.push(ArrMsindex);
	    // 获取点击的位置计算进度条的比列并且通过比列改变播放时间
	    audio.currentTime = e.offsetX / $(".bar").width() * audio.duration;

	    // 遍历数组判断位置
	    for (var i = 0; i < ArrMs.length; i++) {
	      if (parseInt(audio.currentTime) < ArrMs[i]) {
	        index = ArrMs[i - 1];
	        break;
	      }
	    }
	    // 正在唱的歌词
	    console.log($("#gc" + index).get(0));

	    // 让正在播放的歌变色
	    $("#gc" + index).css("color", "#31C27C");
	    const gcindex = $("#gc" + index).index(); // 当前歌词所在地的索引
	    if (gcindex > 1) {
	      $("#lrcCon").css("marginTop", 30 - (gcindex) * 30 + "px");
	      // ArrMsindex = ArrMs[gcindex];
	      // 数组对象
	      console.log(ArrMs);

	      // 在dom中的索引和对象名
	      console.log(gcindex);

	      // 对向名所对的值和dom中p的id
	      console.log(ArrMs[gcindex]);

	      ArrMsindex = ArrMsindex2[ArrMsindex2.length - 1];
	    } else {
	      var i = 0;
	      // 根据时间定位到的下一个节点
	      for (i = 0; i < ArrMs.length; i++) {
	        if (parseInt(audio.currentTime) < ArrMs[i]) {

	          console.log("这个时候是伴奏");
	          // parseInt(audio.currentTime) = ArrMs[i];
	          break;
	        }
	      }
	      console.log(i);
	      // var banzouindex = $("#gc"+i).index();
	      // console.log($("#gc"+i).get(0));
	      // $("#lrcCon").css("marginTop", 30-(banzouindex)*30+"px");
	      // ArrMsindex = ArrMs[i];
	      ArrMsindex = ArrMsindex2[ArrMsindex2.length - 1];
	    }
	    console.log(ArrMsindex);
	    // $("#lrcCon > p").css("color", "white");
	  })

	  // 13.切换到搜索页
	  $(".Return").on("tap", function() {
	    // 音乐页面透明度变0层级下降
	    $(".music").animate({
	      opacity: 0
	    }, 500);
	    $(".music").css("z-index", "-1");

	    // 搜索页透明度变1层级提高
	    $(".Search").animate({
	      opacity: 1
	    }, 500);
	    $(".Search").css("z-index", "1");

	    // console.log(n);
	    // 渲染小控制台歌名
	    $(".SmallControl_Singer").html(data[n].name);

	    // 渲染小控制台图片
	    // console.log(data[n]);
	    $(".smallControl img").attr("src", data[n].smallControlimg);

	    // 根据类判断播放状态
	    if ($("#play").hasClass("MeaninglessIdentification")) {
	      $(".StatusSwitching").removeClass("fa-pause").addClass("fa-play");
	    } else {
	      // 在播放
	      $(".smallControl img").addClass("rotate");
	      $(".StatusSwitching").removeClass("fa-play").addClass("fa-pause");

	      $(".smallControl img").css("animation-play-state", "running");
	    }

	    // 判断列表是否回去
	    if (parseInt($(".m_list").css("right")) == 0) {
	      $(".m_list").animate({
	        right: -300
	      }, 500);
	    }
	  })

	  // 因为后续的逻辑$(".Forward").tap();不生效,所有在这封装下切换到音乐页
	  function SwitchMusic() {
	    // 搜索页面透明度变0层级下降
	    $(".Search").animate({
	      opacity: 0
	    }, 500);
	    $(".Search").css("z-index", "-1");

	    // 音乐页透明度变1层级提高
	    $(".music").animate({
	      opacity: 1
	    }, 500);
	    $(".music").css("z-index", "1");

	    // 小图暂停
	    if ($(".smallControl img").hasClass("rotate")) {
	      $(".smallControl img").css("animation-play-state", "paused");
	    }

	    // 判断列表是否回去
	    if (parseInt($(".m_list").css("right")) == 0) {
	      $(".m_list").animate({
	        right: -500
	      }, 450);
	    }

	    // 清空文本框
	    if ($("#sousuo").val() != "") {
	      $("#sousuo").val("");
	    }

	    // 清空搜索列表
	    $(".listfather .list ul").html("");
	  }
	  // 14.切换到音乐页
	  $(".Forward").on("tap", function() {
	    SwitchMusic()
	  })

	  // 15.小控制台的播放暂停切换
	  $(".StatusSwitching").on("tap", function() {
	    if ($(this).hasClass("fa-pause")) {
	      audio.pause();
	      $(".smallControl img").css("animation-play-state", "paused");
	      $(this).removeClass("fa-pause").addClass("fa-play");

	      // 切换音乐页图标和类
	      // $("#play").css("backgroundImage", "url(img/play.png)");

	      $("#play").removeClass("fa-pause").addClass("fa-play");
	      $("#play").addClass("MeaninglessIdentification");
	    } else {
	      audio.play();

	      $(".smallControl img").addClass("rotate");
	      $(".smallControl img").css("animation-play-state", "running");

	      $(this).removeClass("fa-play").addClass("fa-pause");

	      // 切换音乐页图标和类
	      // $("#play").css("backgroundImage", "url(img/zan.png)");
	      $("#play").removeClass("fa-play").addClass("fa-pause");
	      $("#play").removeClass("MeaninglessIdentification");
	    }

	    // 阻止冒泡
	    return false;
	  })

	  // 16.小控制台的列表展开
	  $(".smallControl_menu").on("tap", function() {
	    ListAmimate();

	    // 阻止冒泡
	    return false;
	  })

	  // 17.点小控制器切换到音乐页
	  $(".smallControl").on("tap", function() {
	    SwitchMusic();
	  })

	  // 18搜索列表
	  // 18.1搜索框去除拼音
	  let flag = true;

	  $("#sousuo").on("compositionstart", function() {
	    flag = false;
	  })

	  $("#sousuo").on("compositionend", function() {
	    flag = true;
	  })

	  // 18.2搜索框的实时更新
	  $("#sousuo").on("input", function() {
	    // 当前搜索框内容
	    const value = $.trim($(this).val());

	    const _this = this;

	    setTimeout(function() {
	      if (flag && value != '') {
	        Service.getSearchLish(value, function(SearchMarkData) {
	          const SousuoArr = [];

	          let html = "";

	          // 前端筛选下,将含有字符的取出来
	          SearchMarkData.forEach(function(item, key) {
	            if (SearchMarkData[key].SearchMark.indexOf(value) != -1) {
	              SousuoArr.push(SearchMarkData[key].SearchMark);
	            }
	          })

	          // 排序,根据下标出现的位置从小到大排序
	          function Sortstrindex(arr, str) {
	            for (let i = 0; i < arr.length - 1; i++) {
	              for (let j = 0; j < arr.length - i - 1; j++) {
	                if (arr[j].indexOf(str) > arr[j + 1].indexOf(str)) {
	                  const swap = arr[j];
	                  arr[j] = arr[j + 1];
	                  arr[j + 1] = swap;
	                }
	              }
	            }
	          }

	          Sortstrindex(SousuoArr, value);

	          for (let j = 0; j < SousuoArr.length; j++) {
	            // 字符串替换(为了设置高亮搜索列表高亮)
	            SousuoArr[j] = SousuoArr[j].replace(value, "<span>" + value + "</span>")

	            html += "<li><span class='fa fa-search'></span><a>" + SousuoArr[j] + "</a></li>";
	          }

	          $(".list ul").html(html);

	          // return;

	          // 点击搜索选项
	          $(".Search .list ul li").on("tap", function() {
	            // console.log($(this).text());
	            // 搜索列表清空
	            $(".list ul").html("");

	            const index = $(this).children("a").html();

	            let str = index.split(" ")[0];

	            // 替换   <span>晴天<span>   =>    晴天
	            str = str.replace("<span>" + value + "</span>", value);

	            // 判断data上是否有
	            for (const i in data) {
	              if (str == data[i].name) {
	                // alert("data上有,进来了if,return不往后执行发ajax了");
	                playing(i);
	                n++;
	                // MusicListPlay();

	                // 跳转到音乐页
	                SwitchMusic();

	                $("#sousuo").val("");

	                return;
	              }
	            }
	            // data上没有
	            Service.SearchLishTap(str, url, function(AjaxData) {
                for (const i in AjaxData) {
	                // 比较点击的列和从后台拿到的数据是否一致
	                if (str == AjaxData[i].name) {
	                  // 增加到歌曲列表(push到最后)
	                  data.push(AjaxData[i]);

	                  // 直接播放
	                  playing(data.length - 1);

	                  // 歌曲列表动态渲染
	                  MusicListRender();

	                  // MusicListremove();

	                  n++;

	                  // MusicListPlay();

	                  // 跳转到音乐页
	                  // $(".Forward").tap();
	                  SwitchMusic();

	                  $("#sousuo").val("");
	                }
	              }
	            })
	          })

	        })
	      } else {
	        $(".list ul").html('');
	      }
	    }, 0)
	  })

	  // 页面切入函数(单页核心)
	  function PageEntry(DOM) {
	    // 透明度变1层级提高
	    DOM.animate({
	      opacity: 1
	    }, 500);
	    DOM.css("z-index", "2");

	    // DOM.css("left", "0");
	    // 关闭侧滑
	    mui('.mui-off-canvas-wrap').offCanvas().close();

	    // 判断列表是否回去
	    if (parseInt($(".m_list").css("right")) == 0) {
	      $(".m_list").animate({
	        right: -500
	      }, 450);
	    }
	    /*
	     	待解决:页面切入后确实禁用了侧滑菜单,但是页面切出的时候找不到重新启用的办法.....
	    	//停止事件的传播
	    	$(".mui-inner-wrap").on("drag", function(e)
	    	{
	    		e.stopPropagation();
	    	})
	    */
	  }

	  // 页面切出函数(单页核心)
	  function PageCutout(DOM) {
	    // 透明度变0层级降低
	    DOM.animate({
	      opacity: 0
	    }, 500, function() {
	      DOM.css("zIndex", "-1");
	    });
	  }

	  // 19.弹幕
	  $(".Barrage").on("tap", function() {
	    // 拿到所有的评论然后做动画

	  })

	  // 20.背景轮播
	  let CarouselFlag = true; // 背景轮播标识
	  let CarouselArr = []; // 保存背景图的字符串
	  let CarouselNum = null; // 随机数
	  let CarouselTime = null; // 保存计时器
	  let OutInFlag = true; // 淡入淡出标识

	  function CarouselOutIn() {
	    clearInterval(CarouselTime);
	    // console.log("开启动轮播(开启计时器)");
	    CarouselTime = setInterval(function() {
	      CarouselNum = Math.floor(Math.random() * CarouselArr.length);

	      if (OutInFlag == true) {
	        if ($(".music img:first-child").attr("src") == CarouselArr[CarouselNum].smallControlimg) {
	          CarouselNum++;
	        }

	        $(".music img:first-child").removeClass().addClass("MusicbgFadeIn");
	        $(".music img:last-child").attr("src", CarouselArr[CarouselNum].smallControlimg);
	        $(".music img:last-child").removeClass().addClass("MusicbgFadeOut");

	        // 小控制台也要变
	        $(".smallControl img").attr("src", CarouselArr[CarouselNum].smallControlimg);
	      } else {
	        if ($(".music img:last-child").attr("src") == CarouselArr[CarouselNum].smallControlimg) {
	          CarouselNum++;
	        }

	        // first设置图片
	        $(".music img:first-child").attr("src", CarouselArr[CarouselNum].smallControlimg);

	        // first淡出
	        $(".music img:first-child").removeClass().addClass("MusicbgFadeOut");

	        // last淡入
	        $(".music img:last-child").removeClass().addClass("MusicbgFadeIn");

	        // 小控制台也要变
	        $(".smallControl img").attr("src", CarouselArr[CarouselNum].smallControlimg);
	      }
	      OutInFlag = !OutInFlag;
	    }, 6000)
	  }
	  $(".Carousel").on("tap", function() {
	    if (CarouselFlag == true) {
	      $(this).css("color", "#37C380");

	      if (CarouselArr.length == 0) {
	        // 数组为空才发ajax
	        // console.log(data[n].singer);
	        Service.getCarousel(function(data) {
	          CarouselArr = data

	          CarouselOutIn();
	        })
	      } else {
	        // console.log("数组已经有值了,不用发ajax了,但是还是要淡入淡出");
	        CarouselOutIn();
	      }
	    } else {
	      console.log("关闭轮播(关计时器)");
	      $(this).css("color", "white");
	      clearInterval(CarouselTime);
	    }

	    // 取反
	    CarouselFlag = !CarouselFlag;
	  })

	  // 21.评论
	  // 21.1 评论页初始化
	  // 定义全局的变量保存评论的内容
	  let RatingsData = null;

	  function commentinit() {
	    const seachid = $("#m_gm").text();

	    $.ajax({
	      type: "get",
	      url: BaseUrl + "/user/getSongComment?seachid="+seachid,
	      success: function(data) {
	        RatingsData = data.data
	        // 设置评价总数(大于99设置为:  99+)
	        if (RatingsData.length < 99) {
	          $(".CommentBox .PublicHeader .headertitle").html("评价" + (RatingsData.length));
	        } else {
	          $(".CommentBox .PublicHeader .headertitle").html("评价99+");
	        }

	        if (RatingsData.length == 0) {
	          // 这一部分待处理,模板字符串会在这之后执行,所有这里的dom操作都凉了
	          // alert("无数据");
	          // $(".CommentItemBoxall").text("111111111111111");
	        }

	        console.log("得到的评论页数据:" + data);

	        // 将得到的数据进行赋值(主要作用是为了保存下来,方便后面的发表评论)
          CommentList = {rows: data.data}
	        // 模板引擎渲染
	        $(".CommentItemBox").html(template('Comment', CommentList));
	      }
	    });
	  }

	  commentinit();

	  // 21.2 当前歌曲名
	  let seachid = "星晴";
	  // 21.3 评论
	  $(".Comment").on("tap", function() {
	    // 判断列表是否回去
	    if (parseInt($(".m_list").css("right")) == 0) {
	      $(".m_list").animate({
	        right: -500
	      }, 450);
	    }

	    // 歌曲名赋值
	    seachid = $("#m_gm").text();

	    PageEntry($(".CommentBox"));
	  })

	  // 21.4 评论标识      资料name是否填写的标识(0是没填不能评论,1是填了可以评论)
	  let getCommentboxFlagData = null;

	  function getCommentboxFlag() {
	    $.ajax({
	      type: "get",
	      url: BaseUrl + "/user/getIsComment?userName="+url,
	      success: function(data) {
          getCommentboxFlagData = data.data
	      }
	    });
	  }

	  getCommentboxFlag();

	  // 评论列表的数组对象
	  var CommentList = null;

	  // 拿到系统时间
	  function getTime() {
	    const oDate = new Date();

	    // 对不满两位的处理
	    function toDouble(num) {
	      if (num < 10) {
	        return '0' + num;
	      } else {
	        return '' + num;
	      }
	    }

	    const str = oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDate() + ' ' + oDate
	      .getHours() + ':' + toDouble(oDate.getMinutes()) + ':' + toDouble(oDate.getSeconds());

	    return str;
	  }

	  // 21.5 发表评论
	  $(".CommentBoxBootom .Send").on("tap", function() {
	    // 获取文本框的值
	    const CommentText = $.trim($(".CommentBoxBootom .text").val());

	    if (getCommentboxFlagData == 0) {
	      $(".CommentBoxBootom .text").val("");

	      $(".CommentBoxBootom .text").attr("placeholder", "在我的资料里填了昵称才能评论");
	    } else if (CommentText == "") {
	      $(".CommentBoxBootom .text").attr("placeholder", "评论的内容不能为空");


	    } else if (getCommentboxFlagData == 1) {
	      // 往数据库存储
	      // 评论内容
	      const commenttext = $(".CommentBoxBootom .text").val();

	      $.ajax({
	        type: "post",
	        data: {
	          userid: url,
	          seachid,
	          commenttext,
	          time: getTime(),
	          givethumb: 0
	        },
	        url: BaseUrl + "/user/comment",
	        success: function(data) {
	          data = data.data

	          // 组织对象push进去评论列表的数组对象给用户呈现出评论成功的假象
	          // {id: "1", userid: "111111", seachid: "星晴", commenttext: "1", time: "2019-3-6  16:49:43", userid: "111111"}
	          const obj = {
	            id: data.id,
	            name: data.userName,
	            seachid,
	            commenttext: CommentText,
	            time: getTime(),
	            givethumb: 0
	          };

	          $(".flag").find("button").text("评论成功").end().fadeIn(1000).delay(100).fadeOut(1000);

	          // 添加到头部
	          CommentList.rows.unshift(obj);

	          // 渲染遍
	          $(".CommentItemBox").html(template('Comment', CommentList));

	          // 数据量+1
	          let number = $(".CommentBox .PublicHeader .headertitle").html();

	          number = parseInt(number.slice(2)) + 1;

	          $(".CommentBox .PublicHeader .headertitle").html("评论" + number);

	          // 评论成功清空文本框
	          $(".CommentBoxBootom .text").val("");
	        }
	      });
	    }
	  })

	  // 21.6 评论的点赞(动态渲染的,事件委托注册事件CommentItem)
	  $(".CommentItemBox").delegate(".GiveThumbUp", "tap", function() {
	    // 获取当前评论的自定义属性id
	    const commentid = $(this).parent().parent().attr("data-commentid");

	    // 保存当前this
	    const that = $(this);

	    $.ajax({
	      type: "post",
	      data: {
	        userid: url,
	        seachid,
	        commentid,
	        time: getTime()
	      },
	      url: BaseUrl + "/user/giveThumbs",
	      success: function(data) {
	        if (data.data) {
	          that.find("span:first-of-type").text(parseInt(that.find("span:first-of-type").text()) + 1);
	        } else {
	          $(".flag").find("button").text("一个评论一天只能点一次").end().fadeIn(1000).delay(100).fadeOut(1000);
	        }
	      }
	    });
	  })

	  // 头像上传
	  //         var file = document.getElementsByClassName("file")[0];
	  //
	  //         //onchange:选择文件后触发
	  //         file.onchange = function()
	  //         {
	  //         	//初始化一个文件读取对象
	  //         	var reader = new FileReader();
	  //
	  //         	//读取文件数据	  this.files[0]  文件表单元素选择的第一个文件
	  //         	reader.readAsDataURL(this.files[0])
	  //
	  //         	//读取的过程相当于加载的过程
	  //         	//读取完毕	预览
	  //         	reader.onload = function()
	  //         	{
	  //         		//读取完毕的就是    base64位数据     表示图片
	  //         		document.getElementsByTagName("img")[0].src = this.result;
	  //         	}
	  //         }
	  $(".file").on("change", function() {
	    // 初始化一个文件读取对象
	    const reader = new FileReader();

	    // 读取文件数据	  this.files[0]  文件表单元素选择的第一个文件
	    reader.readAsDataURL(this.files[0])

	    // 读取的过程相当于加载的过程
	    // 读取完毕	预览
	    reader.onload = function() {
	      // 读取完毕的就是    base64位数据     表示图片
	      // document.getElementsByTagName("img")[0].src = this.result;
	      $(".fileimg").attr("src", this.result);
	    }
	  })

	  // 22.我的消息
	  $(".LiMyNews").on("tap", function() {
	    PageEntry($(".MyNews"));
	  })

	  // 资料初始化函数
	  function PerfectDataStart() {
	    $.ajax({
	      type: "get",
	      url: BaseUrl + "/user/getUserData?userName="+url,
	      success: function(data) {
          data = data.data
          $(".DataShow ul li .Name").val(data.name);
          $(".DataShow ul li .Sex").val(data.sex);
          $(".DataShow ul li .Age").val(data.age);
          $(".DataShow ul li .Birthday").val(data.birthday);
          $(".DataShow ul li .School").val(data.school);
          $(".DataShow ul li .Occupation").val(data.Occupation);
	      }
	    });
	  }

	  // 23.我的资料
	  $(".LiPerfectData").on("tap", function() {
	    // 初始化
	    PerfectDataStart();

	    PageEntry($(".PerfectData"));
	  })
	  // 23.1 资料编辑
	  $(".DataEditing").on("tap", function() {
	    // 删禁用属性
	    $(".DataShow ul li input").removeAttr("disabled");

	    // 默认第一个得到焦点
	    $(".DataShow ul li .Name").focus();
	  })
	  // 23.2 资料保存
	  $("#DataSave").on("tap", function() {
	    // 增禁用属性
	    $(".DataShow ul li input").attr("disabled", "disabled");

	    // 获取文本框内填写的值
	    const name = $.trim($(".Name").val());
	    const age = $.trim($(".Age").val());
	    const sex = $.trim($(".Sex").val());
	    const birthday = $.trim($(".Birthday").val());
	    const school = $.trim($(".School").val());
	    const occupation = $.trim($(".Occupation").val());

	    $.ajax({
	      type: "post",
	      data: {
	        userName: url,
	        name,
	        age,
	        sex,
	        birthday,
	        school,
	        occupation
	      },
	      url: BaseUrl + "/user/saveUserData",
	      success: function(data) {
	        if (data.data) {
	          // 提示OK
	          $(".flag").find("button").text("修改成功").end().fadeIn(1000).delay(100).fadeOut(1000);

	          // 更改标识
	          getCommentboxFlag();
	        }
	      }
	    });
	  })

	  // 单页公用的头部返回
	  $(".PublicHeader a").on("tap", function() {
	    PageCutout($(this).parent().parent());
	  })

	  // 24.夜间模式
	  let LiNightModeFlag = true;
	  $(".LiNightMode").on("tap", function() {
	    if (LiNightModeFlag) {
	      plus.screen.setBrightness(0.1);

	      $(this).html("日光模式");
	    } else {
	      $(this).html("夜间模式");
	      plus.screen.setBrightness(1);
	    }
	    LiNightModeFlag = !LiNightModeFlag;
	  })

	  // 25.设置密保
	  $(".LiSetPasswordProtection").on("tap", function() {
	    const that = $(this);

	    $.ajax({
	      type: "get",
	      url: BaseUrl + "/user/getIsSetProtect?userName="+url,
	      success: function(data) {
          data.data ? that.text("已设置过密保") : PageEntry($(".SetPasswordProtection"))
	      }
	    });
	  })

	  let GlobalData = [];

	  // 25.1 密保问题渲染
	  function ProblemRender() {
	    $.ajax({
	      type: "get",
	      url: BaseUrl + "/user/getProtect",
	      success: function(data) {
	        $(".SetPasswordFirst").val("");
	        $(".SetPasswordSecond").val("");
	        $(".SetPasswordThird").val("");
	        // data = JSON.parse(data);
	        GlobalData = data.data;
	        console.log(GlobalData);
	        for (const i in GlobalData) {
            console.log(i);
	          $(".SetPasswordProtection .form-group").eq(i).find("p").html(GlobalData[i].problem).css("opacity", "1");
	        }
	      }
	    });
	  }

	  ProblemRender();

	  // 25.2 换一批
	  $(".ChangeOneBatch").on("click", function() {
	    ProblemRender();
	  })

	  // 25.3 提交密保
	  $(".SetPasswordSubmit").on("click", function() {
	    const answer1 = $.trim($(".SetPasswordFirst").val());
	    const answer2 = $.trim($(".SetPasswordSecond").val());
	    const answer3 = $.trim($(".SetPasswordThird").val());

	    if (answer1.length == 0) {
	      $(".SetPasswordFirst").attr("placeholder", "请输入第一个问题的答案");
	      return;
	    }
	    if (answer2.length == 0) {
	      $(".SetPasswordSecond").attr("placeholder", "请输入第二个问题的答案");
	      return;
	    }
	    if (answer3.length == 0) {
	      $(".SetPasswordThird").attr("placeholder", "请输入第三个问题的答案");
	      return;
	    }

	    $.ajax({
	      type: "post",
	      data: {
	        userName: url,
	        problem1: GlobalData[0].id,
	        problem2: GlobalData[1].id,
	        problem3: GlobalData[2].id,
	        answer1,
	        answer2,
	        answer3
	      },
	      url: BaseUrl + "/user/setProtect",
	      success: function(data) {
	        console.log(data);

	        $(".flag").find("button").text("设置成功").end().fadeIn(1000).delay(100).fadeOut(1000);
	      }
	    });
	  })

	  // 26.关于我们
	  $(".LiAboutUs").on("tap", function() {
	    PageEntry($(".AboutUs"));
	  })


	  // 检查更新标识
	  $.ajax({
	    type: "get",
	    // data:{VersionNumber:$("body").attr("data-VersionNumber")},
	    url: BaseUrl + "CheckUpdates.php",
	    success: function(data) {
	      data = JSON.parse(data);

	      if (parseInt(data[0].VersionNumber) == parseInt($("body").attr("data-VersionNumber"))) {
	        $(".CheckUpdatesfalse").css("display", "block");
	      } else {
	        $(".CheckUpdatestrue").css("display", "block");

	        $(".CheckUpdatestrue button").on("tap", function() {
	          window.location.href = data[0].Address;
	        })
	      }
	    }
	  });

	  // 检查更新
	  $(".LiCheckUpdates").on("tap", function() {
	    PageEntry($(".CheckUpdates"));

	    console.log($("body").attr("data-VersionNumber"));
	  })

	  // 27.反馈
	  $(".LiFeedback").on("tap", function() {
	    PageEntry($(".Feedback"));
	  })

	  // 27.1 文本域输入去拼音
	  const Feedbackflag = true;
	  $(".FeedbackText textarea").on("compositionstart", function() {
	    flag = false;
	  })
	  $(".FeedbackText textarea").on("compositionend", function() {
	    flag = true;
	  })

	  // 27.2监听文本域长度
	  $(".FeedbackText textarea").on("input", function() {
	    // 当前搜索框内容
	    const index = $.trim($(this).val());

	    const FeedbackTextTime = setTimeout(function() {
	      if (index == "") {
	        $(".FeedbackTextLength span").eq(0).html(index.length);
	      }

	      if (flag && index != '') {
	        console.log("index是:" + index + "<====>index.length:" + index.length);
	        $(".FeedbackTextLength span").eq(0).html(index.length);
	      }

	      clearInterval(FeedbackTextTime);

	    }, 0)
	  })

	  // 27.3提交反馈
	  $("#FeedbackSave").on("tap", function() {
	    // 非空验证
	    if ($(".FeedbackText textarea").val() == "") {
	      $(".flag").find("button").text("提交内容不能为空").end().fadeIn(1000).delay(100).fadeOut(1000);

	      return;
	    }

	    const content = $(".FeedbackText textarea").val();

	    $.ajax({
	      type: "post",
	      data: {
	        userid: url,
	        time: getTime(),
	        content
	      },
	      url: BaseUrl + "/user/feedback",
	      success: function(data) {
	        if (data.data) {
	          // 提示OK
	          $(".flag").find("button").text("提交成功").end().fadeIn(1000).delay(100).fadeOut(1000);

	          // 清空文本域
	          $(".FeedbackText textarea").val("");
	        }
	      }
	    });
	  })

	  // 28注销当前账号
	  $("#offCanvasSide footer").on("tap", function() {
	    localStorage.setItem("AutomaticLogin", false);

	    localStorage.setItem("flag", false);

	    // 还在犹豫是否清空本地seesion
	    window.sessionStorage.clear();
	    window.location.href = "Landing.html";
	  })

	  // 模态框与歌曲列表的处理
	  document.querySelector('.mui-off-canvas-wrap').addEventListener('shown', function(event) {
	    // 判断列表是否回去
	    if (parseInt($(".m_list").css("right")) == 0) {
	      $(".m_list").animate({
	        right: -500
	      }, 450);
	    }
	  })

	  // 右滑模态框的时候让歌曲列表回去
	  setInterval(function() {
	    // 获得translateX的值
	    /*
	        matrix(1, 0, 0, 1, 262, 0)  =>  1,0,0,1,262,0  => ["1", "0", "0", "1", "262", "0"] => 262
	    */
	    const translateX = parseInt($(".mui-inner-wrap").css("transform").replace(/[^0-9\-,]/g, "").split(",")[4]);

	    if (translateX > 0) {
	      // 判断列表是否回去
	      if (parseInt($(".m_list").css("right")) == 0) {
	        $(".m_list").animate({
	          right: -500
	        }, 450);
	      }
	    }
	  }, 0)
	})
